<template>
  <div class="mt-p-address">
    <x-header class="mt-p-address-header vux-normal-header"
    :left-options="{preventGoBack: true}"
    @on-click-back="backToInfo">
      <router-link :to="{name: 'demandsBoardInfo'}" slot="right">保存</router-link>
    </x-header> 
    <div v-if="supplyDistricts.length > 0" class="mt-p-address-current">
      <div 
      class="mt-p-address-current-district"
      v-for="(district, i) in supplyDistricts"
      :key="i">
        <span v-show="district.name" @click="direct(i)">{{district.name}}</span>
        <span v-show="district.name" class="mt-p-address-current-arrow">></span>
      </div>
    </div>
    <transition :name="transitionName">
      <router-view class="mt-p-addresses"></router-view>
    </transition>
  </div>
</template>

<script>
import { XHeader, Group, Cell, XTextarea } from "vux"
import getTransitionName from "@/modules/transition"

export default {
  data() {
    return {
      transitionName: "silde-right",
      districts: [],
      from: ''
    }
  },
  watch: {
    $route(to, from) {
      this.transitionName = getTransitionName.call(this, to, from)
      this.from = from
      // console.log(from)
    }
  },
  methods: {
    direct(i) {
      switch (i) {
        case 0:
          this.$router.push("/trade/demands/post/address/provinces")
          break
        case 1:
          this.$router.push("/trade/demands/post/address/citys")
          break
        case 2:
          this.$router.push("/trade/demands/post/address/areas")
          break
        case 3:
          this.$router.push("/trade/demands/post/address/towns")
          break
      }
    },
    backToInfo() {
      // console.log(this.$router)
    }
  },
  components: { XHeader, Group, Cell, XTextarea },
  computed: {
    supplyDistricts() {
      return this.$store.getters.supplyDistricts
    }
  }
}
</script>

<style lang="scss">
@import "../../../../styles/index.scss";
.mt-p-address {
  background: #f5f5f5;

  .mt-p-address-header {
  }

  .mt-p-address-current {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: 40px;
    padding: 0 10px;
    line-height: 40px;
    font-size: 16px;
    background: #fff;

    .mt-p-address-current-district {
      display: inline-block;
    }
  }

  .mt-p-addresses {
    position: fixed;
    z-index: 7;
    left: 0;
    top: 110px;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow-y: scroll;
    -webkit-overflow-y: scroll;
  }
  .mt-p-addresses::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: #fff;
  }
}
</style>
